<template>
	<view class="container">
		<view class="bg">
			<view class="fivesouend u-p-t-80">0.00</view>
			<view class="bzj">当前保证金</view>
		</view>
		<u-tabs class="tabs u-p-r-80 u-p-l-30" :list="tablist" :is-scroll="true" :current="current" @change="change"
		 active-color="#4B9CFF"></u-tabs>
		<scroll-view class="list" :style="{ height: contentHeight+ 'px' }" scroll-y="true" refresher-enabled="true"
		 :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore" @refresherabort="onAbort">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-cell">
					<view class="title">
						加入团队
					</view>
					<view class="value">（专业桥梁设计小分队）</view>
				</view>

				<view class="item-cell u-flex u-row-between">
					<view class="text">￥1000</view>
					<view class="u-flex u-row-center"> 10月15日 11:36<u-icon name="arrow-right" color="#888E9A" size="28"></u-icon>
					</view>
				</view>

			</view>
			<u-loadmore class="u-m-30" :status="loadStatus" :icon-type="iconType" :load-text="loadText" bgColor="#F5F5F9"></u-loadmore>
		</scroll-view>

		<view class="xuxian">
		</view>


	</view>
</template>

<script>
	import bondData from "@/common/bond.data.js";
	export default {
		data() {
			return {
				tablist: [],
				current: 0,
				tabbar: bondData,
				list: [],
				/*滚动分页*/
				triggered: false,
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				},
				contentHeight: 0
			};
		},
		onLoad() {
			let that = this;
			this.tabbar.forEach(function(item) {
				that.tablist.push(item)
			})
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollHeight = res.windowHeight;
				}
			});
			let view = uni.createSelectorQuery().in(this).select(".bg");
			view.boundingClientRect(data => {
				that.contentHeight = that.scrollHeight - data.height - 70;
			}).exec();
			console.log("contentHeight", that.contentHeight);
		},
		methods: {
			change(index) {
				this.current = index;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F9;
	}

	.container {
		.bg {
			height: 350rpx;
			background: #4B9CFF;
			margin: 0 auto;
		}

		.bzj {
			text-align: center;
			font-size: 32rpx;
			opacity: 0.5;
			color: #FFFFFF;
		}

		.fivesouend {
			text-align: center;
			font-size: 92rpx;

			color: #FFFFFF;

		}

		.list {
			.item {
				background: #fff;
				margin: 28upx 28rpx 0 28rpx;
				padding: 20rpx;
				border-radius: 20upx;
				display: flex;
				justify-content: space-between;
				height: 190rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.riqi {
					white-space: nowrap;
					color: #9DA2B0;
				}


				.item-cell {
					display: flex;
					align-items: center;
					.title {
						padding:10rpx 0;
						color: #9DA2B0;
						white-space: nowrap;
						font-size: 30upx;
					}

					.value {
						white-space: nowrap;
						color: #0D1D36;
						font-size: 30upx;
						margin-left: 10upx;
					}

					.text {

						color: #FE5022;
						font-size: 30upx;
					}
				}
			}
		}
	}
</style>
